<template>
  <div>
    <vue-codemirror v-model="sqlCode" :options="editorOptions"/>
    <el-button type="primary" @click="formatSQL">格式化</el-button>
    <el-button type="primary" @click="clear">清空</el-button>
  </div>
</template>

<script>
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/sql/sql';

import VueCodemirror from 'vue-codemirror/codemirror';
import sqlFormatter from 'sql-formatter';

export default {
  name: "BdpSqlEditor",
  components: {
    VueCodemirror,
  },
  props: {
    value: {type: String, default: null},
  },
  data() {
    return {
      sqlCode: '',
      formatSqlCode: '',
      // CodeMirror 配置选项
      editorOptions: {
        mode: "text/x-hive", // 设置编辑器的语言模式为 SQL
        theme: "dracula", // 设置编辑器的主题，可以选择其他主题如 "material"、"dracula" 等
        lineNumbers: true, // 显示行号
        tabSize: 4, // 设置制表符的宽度为4个空格
        indentWithTabs: false, // 使用空格而不是制表符进行缩进
        autofocus: true, // 自动聚焦到编辑器
        matchBrackets: true, // 高亮匹配的括号
        autoCloseBrackets: true, // 自动闭合括号
        extraKeys: {
          "Ctrl-Space": "autocomplete", // 开启自动完成功能
          // "Ctrl-Enter": runQuery, // 自定义快捷键，例如运行查询函数
        },
      },
    };
  },
  watch: {
    'value': {
      handler(val) {
        this.sqlCode = val
      }, immediate: true
    },

    'sqlCode': {
      handler(val) {
        this.$emit('input', val)
      }
    }
  },

  methods: {
    formatSQL() {
      this.formatSqlCode = sqlFormatter.format(this.sqlCode);
      this.sqlCode = this.formatSqlCode;
    },

    clear() {
      this.sqlCode = ''
    }
  }
};
</script>

<style>
</style>
